<template>
  <div class="content" id="fullScreen">

    <!--搜索-->
    <div ref="searchDiv">
      <a-form
          ref="defSearch"
          :model="defSearch.param"
          :rules="defSearch.rules"
          :labelCol="defSearch.labelCol"
          class="search_form shadow3">

        <!--搜索条件-->
        <div class="fx_row fx_wrap fx_start" style="width: calc(100%)">
          <a-form-item label="菜单名称" name="name" style="width: 220px">
            <a-input allow-clear v-model:value="defSearch.param.name" placeholder="请输入菜单名称"></a-input>
          </a-form-item>

          <a-form-item label="访问地址" name="path" style="width: 220px">
            <a-input allow-clear v-model:value="defSearch.param.path" placeholder="请输入访问地址"></a-input>
          </a-form-item>

          <!--          <a-form-item label="链接类型" name="link_type" style="width: 200px">-->
          <!--            <a-select v-model:value="defSearch.param.link_type" placeholder="链接类型" :allowClear="true">-->
          <!--              <a-select-option v-for="(item,index) in option.menuLinkType" :value=item.value>-->
          <!--                {{-->
          <!--                  item.label-->
          <!--                }}-->
          <!--              </a-select-option>-->
          <!--            </a-select>-->
          <!--          </a-form-item>-->

          <a-form-item label="菜单类型" name="type" style="width: 220px">
            <a-select v-model:value="defSearch.param.type" placeholder="菜单类型" :allowClear="true">
              <a-select-option v-for="(item,index) in option.type" :value=item.value>
                {{
                  item.label
                }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="状态" name="menu_is_show" style="width: 220px">
            <a-select v-model:value="defSearch.param.menu_is_show" placeholder="是否展示" :allowClear="true">
              <a-select-option v-for="(item,index) in option.menuIsSHow" :value=item.value>
                {{
                  item.label
                }}
              </a-select-option>
            </a-select>
          </a-form-item>

        </div>

        <!--按钮-->
        <a-form-item class="search_button_2">
          <a-button type="primary" @click.stop="search" class="font12">
            <template #icon>
              <SearchOutlined/>
            </template>
            查询
          </a-button>
          <a-button style="margin-left: 10px" @click.stop="()=>{ resetForm('defSearch'); }" class="font12">
            <template #icon>
              <UndoOutlined/>
            </template>
            重置
          </a-button>
        </a-form-item>

      </a-form>
    </div>

    <!--表格选项-->
    <div class="table_tools">
      <a-button class="font11" type="primary" size="small" ghost @click.stop="openAddMenu(null,'0')">
        <template #icon>
          <plus-outlined/>
        </template>
        新建
      </a-button>
      <!--      <a-divider type="vertical"/>-->
      <!--      <a-button class="font11" type="primary" size="small" ghost>删除</a-button>-->

      <div style="flex: 1 1 0"></div>

      <a-tooltip placement="top">
        <template #title>
          <span>批量删除</span>
        </template>
        <delete-outlined :style="{fontSize: '16px'}" @click.stop="delMenuBatch"/>
      </a-tooltip>

      <a-divider type="vertical"/>

      <a-tooltip placement="top">
        <template #title>
          <span>表格大小</span>
        </template>
        <a-dropdown :trigger="['click']">
          <setting-outlined :style="{fontSize: '16px'}"/>
          <template #overlay>
            <a-menu v-model:selectedKeys="defTable.size" @click="(item)=>{defTable.size=item.key+''}">
              <a-menu-item v-for="(item,index) in option.tableSize" :key="item.value">
                <div style="padding: 0 5px">
                  {{ item.label }}
                </div>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>

      </a-tooltip>

      <!--      <a-divider type="vertical"/>-->

      <!--      <a-tooltip placement="top">-->
      <!--        <template #title>-->
      <!--          <span>全屏</span>-->
      <!--        </template>-->
      <!--        <fullscreen-outlined :style="{fontSize: '16px'}" @click="fullScreen('fullScreen')"/>-->
      <!--      </a-tooltip>-->
      <!--          <a style="margin-left: 10px">-->
      <!--            <file.ts-add-outlined style="color: #1890FF;font-size: 10px;"/>-->
      <!--            新增</a>-->
      <!--          <a style="margin-left: 10px">-->
      <!--            <edit-outlined style="color: #1890FF;font-size: 10px;"/>-->
      <!--            编辑</a>-->
      <!--          <a style="margin-left: 10px;padding:2px;">-->
      <!--            <delete-outlined style="color: #1890FF;font-size: 10px;"/>-->
      <!--            删除</a>-->
    </div>

    <!--表格-->
    <div ref="tableDiv" :style="{background:'#FFFFFF',minHeight:option.tableMinHeight}">
      <a-table
          sticky
          ref="defTable"
          rowKey="id"
          style="height: 100%"
          :pagination="false"
          :size="defTable.size"
          :columns="defTable.column"
          :expandRowByClick="true"
          :data-source="defTable.data"
          :rowSelection="defTable.rowSelection()"
          @resizeColumn="(w, col) => {col.width = w;}">

        <!--        <template v-slot:expandIcon="props ">-->
        <!--          <template v-if="props.record.children">-->
        <!--            <down-outlined v-if="props.expanded"/>-->
        <!--            <right-outlined v-if="!props.expanded"/>-->
        <!--          </template>-->
        <!--        </template>-->
        <!--表格内容-->
        <template #bodyCell="{ text, record, index, column  }">
          <!--目录-->
          <template v-if="column.dataIndex === 'name'">
            <component :is="$icons[record.icon]"
                       class="border1_radius"
                       style="padding: 5px;font-size: 16px;margin-right: 8px"/>
            <span v-if="record.type==0||record.type==1"> {{ text }}</span>
            <a-tag v-else> {{ text }}</a-tag>
          </template>

          <!--目录-->
          <template v-if="column.dataIndex === 'permission'">
            <a-tag v-if="text"> {{ text }}</a-tag>
          </template>


          <template v-if="column.dataIndex === 'apis'">

            <tempalte v-if="text">
              <a-tooltip placement="top">
                <template #title>
                  <a v-for=" (item,index) in JSON.parse(text)">
                    {{ item }} &nbsp;
                  </a>
                </template>
                <a-tag v-for=" (item,index) in JSON.parse(text)">
                  {{ item }}
                </a-tag>
              </a-tooltip>
            </tempalte>

            <tempalte v-else>

            </tempalte>

          </template>

          <template v-if="column.dataIndex === 'path'">
            <span v-if="text && text!='#'">{{ text }}</span>
            <span v-else></span>
          </template>

          <template v-if="column.dataIndex === 'type'">
            <a-tag v-if="text==0" color="blue">目录</a-tag>
            <a-tag v-else-if="text==1" color="green">菜单</a-tag>
            <a-tag v-else color="yellow">功能</a-tag>
          </template>

          <!--状态-->
          <template v-if="column.dataIndex === 'menu_is_show'">
            <a-tag v-if="text==0" color="green" class="round">展示</a-tag>
            <a-tag v-if="text==1" color="orange" class="round">隐藏</a-tag>
          </template>

          <!--缓存-->
          <template v-if="column.dataIndex === 'cache_status'">
            <template v-if="record.type =='2' || record.type=='3'">
              <span></span>
            </template>
            <template v-else>
              <a-tag v-if="text=='0'" color="blue" class="round"> 已开启</a-tag>
              <a-tag v-else color="orange" class="round"> 已关闭</a-tag>
            </template>
          </template>

          <template v-if="column.dataIndex === 'link_type'">
            <template v-if="record.type =='2' || record.type=='3'">
              <span></span>
            </template>
            <template v-else>
              <a-tag v-if="text==0" color="blue" class="round">非链接</a-tag>
              <a-tag v-if="text==1" color="orange" class="round">内部链接</a-tag>
              <a-tag v-if="text==2" color="yellow" class="round">外部链接</a-tag>
            </template>
          </template>

          <!--操作-->
          <template v-if="column.dataIndex === 'action'">

            <!--详情-->
            <a @click.stop="openInfo(record)" class="table_action_a">详情</a>

            <!--编辑-->
            <a-divider type="vertical"/>
            <a class="table_action_a" @click.stop="openEditMenu(record)">编辑</a>

            <!--删除-->
            <a-divider type="vertical"/>
            <a-popconfirm placement="bottomRight" ok-text="确定" @click.stop cancel-text="取消"
                          @confirm="deleteMenu(record)">
              <template #title>
                <p>是否执行删除操作?</p>
              </template>
              <a class="table_action_a">删除</a>
            </a-popconfirm>

            <!--更多、新增菜单、添加功能-->
            <a-divider type="vertical" v-if="record.type=='0' || record.type=='1'"/>
            <a-dropdown v-if="record.type=='0' || record.type=='1'">
              <a class="table_action_a" @click.stop @click.prevent>更多
                <DownOutlined/>
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item v-if="record.type==0" class="hover_blue table_action_a"
                               @click.stop="openAddMenu(record,'0')">
                    新增目录
                  </a-menu-item>
                  <a-menu-item v-if="record.type==0" class="hover_blue table_action_a"
                               @click.stop="openAddMenu(record,'1')">
                    新增菜单
                  </a-menu-item>
                  <a-menu-item v-if="record.type==1" class="hover_blue table_action_a"
                               @click.stop="openAddMenu(record,'2')">
                    添加按钮
                  </a-menu-item>
                  <a-menu-item v-if="record.type==1" class="hover_blue table_action_a"
                               @click.stop="openAddMenu(record,'3')">
                    添加功能
                  </a-menu-item>
                  <a-menu-item class="hover_blue table_action_a"
                               @click.stop="deleteMenuForce(record)">
                    强制删除
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>

          </template>


        </template>

        <!--      &lt;!&ndash;额外展开行&ndash;&gt;-->
        <!--      <template #expandedRowRender="{ record }">-->
        <!--        <p style="margin: 0">-->
        <!--          {{ record.description }}-->
        <!--        </p>-->
        <!--      </template>-->

      </a-table>
    </div>

    <!--新增、编辑、详情-->
    <a-modal
        :title="option.modalTitle"
        width="66%"
        style="min-width: 800px"
        :maskClosable="false"
        :destroyOnClose="true"
        v-model:visible="option.openModal">

      <!--表单-->
      <a-form
          ref="defForm"
          label-align="right"
          :model="defForm.data"
          :rules="defForm.rules"
          :scrollToFirstError="true">

        <a-form-item label="上级目录" name="pid" :labelCol="{style: {width: '70px'}}">
          <a-tree-select
              v-model:value="defForm.data.pid"
              tree-data-simple-mode
              allow-clear
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="option.menuTree"
              :fieldNames="{children:'children', label:'name', value: 'id' }"
              placeholder="（#）根目录"
              @select="treeMenuSelect"
          />
        </a-form-item>

        <a-form-item label="菜单名称" name="name" :labelCol="{style: {width: '70px'}}">
          <a-input v-model:value="defForm.data.name" placeholder="请输入菜单名称" :allowClear="true"/>
        </a-form-item>

        <a-row :gutter="20">

          <a-col :span="11">
            <a-form-item label="菜单类型" name="type" :labelCol="{style: {width: '70px'}}">
              <a-radio-group v-model:value="defForm.data.type">
                <a-radio v-for="(item,index) in option.type" :value=item.value>{{ item.label }}</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>

          <a-col :span="7">
            <a-form-item label="状态" name="menu_is_show">
              <a-radio-group v-model:value="defForm.data.menu_is_show">
                <a-radio value="0">展示</a-radio>
                <a-radio value="1">隐藏</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>

          <a-col :span="5">
            <a-form-item label="排序" name="sort">
              <a-input-number v-model:value="defForm.data.sort" :min="1" :max="99999"/>
            </a-form-item>
          </a-col>

          <!--图标-->
          <a-col :span="24" v-if="defForm.data.type=='0'||defForm.data.type=='1'">
            <a-form-item label="图标" name="icon" aline="center" :labelCol="{style: {width: '70px'}}">
              <a-popover v-model:visible="option.selectIcon" placement="bottom" trigger="click" style="padding: 0">
                <component :is="$icons[defForm.data.icon]" class="menu_icon"/>
                <a-button shape="circle" size="small">
                  <template #icon>
                    <SearchOutlined/>
                  </template>
                </a-button>

                <template #content style="padding: 0!important;">
                  <SelectIcon maxHeight="500px" style="background: #FFFFFF;width: 850px;height: 500px;"
                              @clickItem="(item)=>{defForm.data.icon=item.cName;option.selectIcon=false}"></SelectIcon>
                </template>
              </a-popover>

              <a-button style="margin-left: 5px" v-if="defForm.data.icon" shape="circle" size="small"
                        @click.stop="()=>{defForm.data.icon=null;option.selectIcon=false}">
                <template #icon>
                  <CloseCircleOutlined/>
                </template>
              </a-button>

            </a-form-item>
          </a-col>

          <!--描述信息-->
          <a-col :span="24">
            <a-form-item label="描述信息" name="desc">
              <a-textarea v-model:value="defForm.data.desc"
                          readonly show-count :maxlength="200" placeholder="请输入描述信息" :rows="3"/>
            </a-form-item>
          </a-col>

          <!--菜单-->
          <template v-if="defForm.data.type=='1'">
            <a-divider style="margin: 0 0 15px 0;padding:0"/>

            <!--菜单类型、与链接类型-->
            <a-col :span="12">
              <a-form-item label="链接类型" name="link_type">
                <a-radio-group v-model:value="defForm.data.link_type">
                  <a-radio value="0">非链接</a-radio>
                  <a-radio value="1">内部链接</a-radio>
                  <a-radio value="2">外部链接</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <!--            <a-col :span="12" v-if="defForm.data.link_type=='0'">-->
            <!--              <a-form-item label="缓存状态" name="cache_status">-->
            <!--                <a-radio-group v-model:value="defForm.data.cache_status">-->
            <!--                  <a-radio value="0">开启</a-radio>-->
            <!--                  <a-radio value="1">关闭</a-radio>-->
            <!--                </a-radio-group>-->
            <!--              </a-form-item>-->
            <!--            </a-col>-->

            <!--访问地址-->
            <a-col :span="24" v-if="defForm.data.link_type!=2">
              <a-form-item label="访问地址" name="path" :labelCol="{style: {width: '90px'}}">
                <a-input v-model:value="defForm.data.path" placeholder="请输入访问地址" :allowClear="true"/>
              </a-form-item>
            </a-col>

            <!--链接地址-->
            <a-col :span="24" v-if="defForm.data.link_type!=0">
              <a-form-item label="链接地址" name="link_url" :labelCol="{style: {width: '90px'}}">
                <a-input v-model:value="defForm.data.link_url" placeholder="请输入链接地址" :allowClear="true"/>
              </a-form-item>
            </a-col>

            <!--组件地址-->
            <a-col :span="24" v-if="defForm.data.link_type!=2">
              <a-form-item name="path" :labelCol="{style: {width: '90px'}}">

                <template #label>
                  <a-tooltip placement="top">
                    <template #title>
                      输入内容为代码中 <span style="font-weight: 800"> module目录 </span> 下的相对路径；举例：/system/SystemMenu
                    </template>
                    <question-circle-filled/>
                  </a-tooltip>
                  <span style="margin-left: 5px">组件地址</span>
                </template>

                <a-input v-model:value="defForm.data.component_path" placeholder="请输入组件地址" :allowClear="true"/>
              </a-form-item>
            </a-col>

            <!--路由参数-->
            <a-col :span="24" v-if="defForm.data.link_type!=2">
              <a-form-item name="param" :labelCol="{style: {width: '90px'}}">

                <template #label>
                  <a-tooltip placement="top">
                    <template #title>
                      输入格式为JSON字符串，例：{"id":10,"name":"调皮的张三"}
                    </template>
                    <question-circle-filled/>
                  </a-tooltip>
                  <span style="margin-left: 5px">路由参数</span>
                </template>

                <a-input v-model:value="defForm.data.param" placeholder="请输入路由参数" :allowClear="true"/>

              </a-form-item>

            </a-col>

            <!--TAB视图、面包屑导航-->
            <template v-if=" defForm.data.link_type!=2">
              <a-divider style="margin: 0 0 15px 0;padding:0"/>
              <a-col :span="24">
                <a-form-item label="Tab视图" v-if="defForm.data.link_type!=2" :labelCol="{style: {width: '60px'}}">
                  <a-radio-group v-model:value="defForm.data.tab_is_show">
                    <a-radio value="0">展示</a-radio>
                    <a-radio value="1">隐藏</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>

              <!--TAB视图-->
              <template v-if="defForm.data.tab_is_show==0">

                <a-col :span="7">
                  <a-form-item label="标题" :labelCol="{style: {width: '66px'}}">
                    <a-radio-group v-model:value="defForm.data.tab_title_is_show">
                      <a-radio value="0">展示</a-radio>
                      <a-radio value="1">隐藏</a-radio>
                    </a-radio-group>
                  </a-form-item>
                </a-col>

                <a-col :span="8">
                  <a-form-item label="状态" :labelCol="{style: {width: '66px'}}">
                    <a-radio-group v-model:value="defForm.data.tab_is_close">
                      <a-radio value="0">可关闭</a-radio>
                      <a-radio value="1">不可关闭</a-radio>
                    </a-radio-group>
                  </a-form-item>
                </a-col>

                <a-col :span="7">
                  <a-form-item label="图标" :labelCol="{style: {width: '66px'}}">
                    <a-radio-group v-model:value="defForm.data.tab_icon_is_show">
                      <a-radio value="0">展示</a-radio>
                      <a-radio value="1">隐藏</a-radio>
                    </a-radio-group>
                  </a-form-item>
                </a-col>

              </template>

              <!--面包屑导航-->
              <a-divider style="margin:10px 0 15px 0;padding:0"/>
              <a-col :span="24">
                <a-form-item label="面包屑导航" v-if="defForm.data.link_type!=2 " :labelCol="{style: {width: '76px'}}">
                  <a-radio-group v-model:value="defForm.data.bre_is_show">
                    <a-radio value="0">展示</a-radio>
                    <a-radio value="1">隐藏</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item label="标题" v-if="defForm.data.bre_is_show==0" :labelCol="{style: {width: '76px'}}">
                  <a-radio-group v-model:value="defForm.data.bre_title_is_show">
                    <a-radio value="0">展示</a-radio>
                    <a-radio value="1">隐藏</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item label="图标" v-if="defForm.data.bre_is_show==0" :labelCol="{style: {width: '76px'}}">
                  <a-radio-group v-model:value="defForm.data.bre_icon_is_show">
                    <a-radio value="0">展示</a-radio>
                    <a-radio value="1">隐藏</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>

            </template>

          </template>

        </a-row>


        <!--功能、按钮-->
        <template v-if="defForm.data.type=='2'||defForm.data.type=='3'">
          <a-divider style="margin: 0 0 15px 0;padding:0"/>
          <a-form-item name="permission">
            <template #label>
              <a-tooltip placement="top">
                <template #title>
                  举例：system:menu:add（权限字符作用于前端代码中v-has指令）
                </template>
                <question-circle-filled/>
              </a-tooltip>
              <span style="margin-left: 5px">权限字符</span>
            </template>

            <a-input v-model:value="defForm.data.permission" placeholder="请输入权限字符" :allowClear="true"/>
          </a-form-item>
        </template>
        <!--上级目录-->
        <!--        <a-form-item label="国际化" name="ln_key">-->
        <!--          <a-input v-model:value="defForm.data.ln_key" placeholder="请输入国际化KEY" :allowClear="true">-->
        <!--          </a-input>-->
        <!--        </a-form-item>-->

      </a-form>

      <!--底部按钮-->
      <template #footer>
        <a-button v-if="option.modalType=='info'" @click.stop="()=>{option.openModal = false}">关闭</a-button>
        <a-button v-else @click.stop="()=>{option.openModal = false}">取消</a-button>
        <a-button v-if="option.modalType!='info'" @click.stop="()=>{resetForm('defForm')}">重置</a-button>
        <a-button v-if="option.modalType=='add'" type="primary" @click.stop="addMenu">保存</a-button>
        <a-button v-if="option.modalType=='edit'" type="primary" @click.stop="editMenu">保存</a-button>
      </template>

    </a-modal>

  </div>
</template>

<script lang="ts">
import {DeleteOutlined, PlusOutlined, SearchOutlined, UndoOutlined} from "@ant-design/icons-vue";
import {copyObj} from "@/common/util/kit";
import {requiredBlur, requiredChange} from "@/common/util/validate";
import {TreeSelect} from "ant-design-vue";
import {useUserStore} from "@/common/store/modules/user";
import {ModalKit} from "@/common/util/ModalKit";
import {useLayoutStore} from "@/common/store/modules/layout";
import Icon from "@/common/component/SelectIcon.vue";
import SelectIcon from "@/common/component/SelectIcon.vue";
import {refreshMenu} from "@/common/api/common";
import {fullScreen} from "@/common/util/screenfull";
import {parseTree} from "@/common/util/tree";

export default {
  components: {SelectIcon, Icon, DeleteOutlined, SearchOutlined, UndoOutlined, PlusOutlined},
  mounted() {
    this.queryPage()

    //全局监听-刷新当前页面
    this.$event.$on('refresh', (data) => {
      if (this.$route.path == data['path']) {
        this.resetForm('defSearch');
        this.queryPage()
      }
    })
    //更新表格大小
    this.$nextTick(() => {
      this.calcDefaultTableHeight()
    })
    //监控窗口大小变更
    window.onresize = () => {
      this.calcDefaultTableHeight()
    }
  },
  data() {
    return {
      //树形关联勾选需要
      SHOW_ALL: TreeSelect.SHOW_ALL,
      //store
      userStore: useUserStore(),
      //选项
      option: {
        modalTitle: '',
        modalType: '',
        openModal: false,
        selectIcon: false,
        tableMinHeight: '100%',
        tableSize: [
          {label: '大号', value: 'default'},
          {label: '中号', value: 'middle'},
          {label: '小号', value: 'small'},
        ],
        menuIsSHow: [
          {label: '展示', value: '0'},
          {label: '隐藏', value: '1'},
        ],
        menuLinkType: [
          {label: '非链接', value: '0'},
          {label: '内部链接', value: '1'},
          {label: '外部链接', value: '2'},
        ],
        type: [
          {label: '目录', value: '0'},
          {label: '菜单', value: '1'},
          {label: '按钮', value: '2'},
          {label: '功能', value: '3'},
        ],
        menuTree: [],
        apiTree: [],
      },

      //搜索表单（默认）
      defSearch: {
        param: {
          name: "",
          path: undefined,
          link_type: undefined,
          menu_is_show: undefined,
        },
        rules: {},
        labelCol: {style: {width: '60px'}},
      },

      //表单（默认）
      defForm: {
        //实际表单数据
        data: {},
        initData: {
          type: '0',
          menu_is_show: '0',
          sort: '100',
          link_type: '0',
          tab_is_show: '0',
          bre_is_show: '0',
          tab_icon_is_show: '0',
          tab_title_is_show: '0',
          tab_is_close: '0',
          tab_is_refresh: '0',
          bre_title_is_show: '0',
          bre_icon_is_show: '0',
          cache_status: '0',
        },
        rules: {
          component_path: [requiredBlur],
          cache_status: [requiredBlur],
          pid: [requiredChange],
          link_type: [requiredBlur],
          link_url: [requiredBlur],
          name: [requiredBlur],
          sort: [requiredBlur],
          path: [requiredBlur],
        },


      },

      //表单（菜单功能）
      funForm: {
        //实际表单数据
        data: {},
        initData: {
          sort: 1,
          menuName: undefined,
          name: undefined,
          apis: [],
        },
        rules: {
          name: [requiredBlur],
          sort: [requiredBlur],
          apis: [requiredChange],
        },
      },

      //表格数据（默认）
      defTable: {
        size: 'middle',
        data: [],
        column: [
          {title: 'ID', dataIndex: 'id', ellipsis: true, width: 100, align: 'center', resizable: true},
          {title: '名称', dataIndex: 'name', resizable: true, align: 'center',},
          {title: '类型', dataIndex: 'type', resizable: true, align: 'center', width: 80},
          {title: '访问地址', dataIndex: 'path', resizable: true, align: 'center',},
          {title: '组件地址', dataIndex: 'component_path', resizable: true, align: 'center',},
          {title: '权限字符', dataIndex: 'permission', resizable: true, ellipsis: true, align: 'center',},
          {title: '状态', dataIndex: 'menu_is_show', resizable: true, align: 'center', width: 80},
          // {title: '链接', dataIndex: 'link_type', resizable: true, align: 'center', width: 100},
          // {title: '缓存', dataIndex: 'cache_status', resizable: true, align: 'center', width: 80},
          {title: '排序', dataIndex: 'sort', resizable: true, align: 'center', width: 80},
          {title: '操作', dataIndex: 'action', align: 'center', width: 200},
        ],
        selectKey: [],
        selectRow: [],
        rowSelection: () => {
          return {
            type: "checkbox",
            checkStrictly: false,
            preserveSelectedRowKeys: false,//翻页后保留选中状态
            selectedRowKeys: this.defTable.selectKey,
            onChange: (selectedRowKeys, selectedRows) => {
              this.defTable.selectKey = selectedRowKeys
              this.defTable.selectRow = selectedRows
            },
            onSelect: (record, selected, selectedRows) => {
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
            },
          }
        },
      },
    }
  },
  methods: {
    //查询分页
    async queryPage() {
      useLayoutStore().pageLoading = true;

      let param = copyObj(this.defSearch.param)
      param.haseFun = '1'
      this.$http.post('/system/menu/list', param).then((res) => {
        this.defTable.data = parseTree(res.data)
        useLayoutStore().pageLoading = false;

      })
    },
    //搜索
    search() {
      this.$refs.defSearch.validate().then(() => {
        this.queryPage()
      }).catch(error => {
        this.$message.warning("存在错误，请检查表单填写情况。", 2)
      });

    },
    //重置表单（还原）
    resetForm(formName) {
      let form = this.$refs[formName]
      if (form) {
        form.resetFields()
      }
    },
    //打开新增Dialog
    async openAddMenu(record, type) {
      await this.queryTreeMenu()
      this.defForm.data = copyObj(this.defForm.initData)
      if (record) {
        this.defForm.data.pid = record.id
        this.defForm.data.pname = record.name
      } else {
        this.defForm.data.pid = 0
      }
      this.defForm.data.type = type

      this.option.modalTitle = '新增菜单'
      this.option.modalType = 'add';
      this.option.openModal = true;
    },
    //详情
    async openInfo(record) {
      this.queryTreeMenu().then(() => {
        this.defForm.data = copyObj(record)
      })

      this.option.modalTitle = '菜单详情'
      this.option.modalType = 'info';
      this.option.openModal = true;
    },
    //打开编辑Dialog
    async openEditMenu(record) {
      await this.queryTreeMenu()
      this.defForm.data = copyObj(record)

      this.option.modalTitle = '菜单编辑'
      this.option.modalType = 'edit';
      this.option.openModal = true;
    },
    //添加菜单
    addMenu(record) {
      this.$refs.defForm.validate()
          .then(() => {
            let submitForm = copyObj(this.defForm.data)
            //console.log("【addMenu-submitForm】", submitForm)

            this.$http.post("/system/menu/add", submitForm).then((res) => {
              this.$message.success(res.message, 1)
              this.queryPage()
              this.option.openModal = false;
              refreshMenu()
            })

          })
          .catch(error => {
            this.$message.warning("存在错误，请检查表单填写情况。", 2)
          });
    },
    //编辑
    editMenu() {
      this.$refs.defForm.validate()
          .then(() => {
            let submitForm = copyObj(this.defForm.data)
            //console.log("【editMenu-submitForm】", submitForm)

            this.$http.post("/system/menu/edit", submitForm).then(res => {
              this.$message.success(res.message, 1)
              this.option.openEdit = false
              this.queryPage()
              this.option.openModal = false;
            })
            refreshMenu()
          })
          .catch(error => {
            this.$message.warning("存在错误，请检查表单填写情况。", 2)
          });
    },
    //删除指定菜单或功能
    deleteMenuForce(record) {
      ModalKit.confirm(
          `注意：强制删除【ID=${record.id}】，该操作不会判断菜单是否被占用。是否执行强制删除？`,
          () => {
            this.$http.post("/system/menu/del", {ids: [record.id], type: 'force'}).then((res) => {
              this.$message.success(res.message, 1)
              this.queryPage()
              refreshMenu()
            })
          },
          () => {
            this.$message.warning("操作已取消", 1)
          }
      )

    },
    //删除指定菜单或功能
    deleteMenu(record) {
      this.$http.post("/system/menu/del", {ids: [record.id]}).then((res) => {
        this.$message.success(res.message, 1)
        this.queryPage()
        refreshMenu()
      })
    },
    //批量删除菜单
    delMenuBatch() {
      let keys = this.defTable.selectKey;
      if (keys.length === 0) {
        this.$message.warn("请至少勾选一项", 1)
        return
      }

      ModalKit.confirm(
          `已勾选${keys.length}条数据，是否执行批量删除？`,
          () => {
            this.$http.post("/system/menu/del", {ids: keys}).then((res) => {
              this.$message.success(res.message, 1)
              this.queryPage()
              refreshMenu()
            })
          },
          () => {
            this.$message.warning("操作已取消", 1)
          }
      )
    },
    //查询菜单
    async queryTreeMenu() {
      return this.$http.post('/system/menu/list', {type: 0}).then((res) => {
        let list = [{name: '#（根目录）', id: 0}]
        list.push(...parseTree(res.data))
        this.option.menuTree = list
      })
    },
    //上级目录下拉选
    treeMenuSelect(value, node, extra) {
      //console.log("treeParentSelect-value", value)
      //console.log("treeParentSelect-node", node)
      //console.log("treeParentSelect-extra", extra)
      this.defForm.data.pid = value
      this.defForm.data.pname = node.name
      if (value == 0) {
        this.defForm.data.pname = '#'
      }
    },
    //菜单功能下拉选
    treeFunSelect(value, node, extra) {
    },
    //计算表格高度，最小要求铺满窗口
    calcDefaultTableHeight() {
      //减去 （搜索表单、表格工具栏、外边距、分页(60px)）
      let searchDiv = this.$refs.searchDiv.offsetHeight
      let tableToolDiv = 50
      let margin = 32;
      let page = 0

      this.option.tableMinHeight = `calc(100% - ${searchDiv}px - ${tableToolDiv}px - ${margin}px - ${page}px)`;
      //console.log(" searchDiv ", searchDiv)
      //console.log(" tableToolDiv ", tableToolDiv)
      //console.log(" this.defTable.minHeight", this.defTable.minHeight)
    },
    fullScreen
  }
}


</script>

<style lang="less">

</style>

<style scoped lang="less">
.menu_icon {
  font-size: 40px;
  margin-right: 10px;
  padding: 2px;
  border: 1px solid #EEEEEE;
}
</style>
